@import '~styles/config.scss';


.wrap {
    padding: 20px 20px;

    .cell {
        .hh {
            display    : flex;
            position   : sticky;
            top        : 0px;
            z-index    : 1;
            padding    : 20px 0px 10px 0px;
            background : $--background-color-base;
            font-weight: 340;
            font-size  : 20px;
            color      : $--color-text-regular;

            .t1 {
                flex: none
            }

            .t2 {
                flex: 1;
            }

            .t3 {
                flex: 1;
            }

            .t4 {
                flex: none
            }
        }

        .mm {
            background-color: #fff;
            border-radius: 6px;
        }
    }



}


.userInfo {
    

    .top {
        display: flex;

        padding: 14px;

        .info {
            flex   : auto;
            display: flex;


            .face {
                width        : 50px;
                height       : 50px;
                flex         : none;
                border-radius: 100%;
                overflow     : hidden;
            }

            .text {
                flex        : auto;
                padding-left: 10px;

                i {
                    margin-right: 5px;
                }

                .t1 {
                    line-height: 30px;
                    font-weight: 18px;
                    font-weight: bold;
                }

                .t2 {
                    line-height: 20px;
                    font-size  : 12px;
                    color      : $--color-text-secondary;
                }
            }
        }

        .in {
            flex   : none;
            display: flex;


            .li {
                .iconfont {
                    opacity         : .8;
                    cursor          : pointer;
                    font-size       : 24px;
                    background-color: $--background-color-base;
                    display         : block;
                    width           : 50px;
                    height          : 50px;
                    border-radius   : 100%;
                    display         : flex;
                    align-items     : center;
                    justify-content : center;
                    margin-left     : 10px;
                    transition      : all .5s;

                    &:hover {
                        color  : $--color-primary;
                        opacity: 1;
                    }
                }
            }

        }
    }
}

.inAppdetail {

    .code {
        width : 200px;
        height: 200px;
    }

    .name {
        text-align : center;
        padding-top: 10px;
        line-height: 30px;
        font-size  : 14px;

        i {
            margin-right: 10px;
        }
    }

    .link {
        font-size : 12px;
        text-align: center;
    }
}

.hotGoodsDetail {
    .detail {
        width: 200px;

        // align-items: center;
        .img {
            width : 200px;
            height: 200px;
        }

        .name {
            line-height  : 50px;
            font-size    : 16px;
            font-weight  : bold;
            color        : $--color-text-primary;
            overflow     : hidden;
            text-overflow: ellipsis;
            white-space  : nowrap;
            text-align   : center;
        }

        .sales {
            background-color: $--background-color-base;

            width          : 100%;
            box-sizing     : border-box;
            padding        : 5px 8px;
            display        : flex;
            font-size      : 12px;
            justify-content: space-between;

            .s1 {
                color: $--color-text-secondary;
            }

            .s2 {
                color: $--color-text-primary;
            }
        }
    }
}

.dataWrap {

    display    : flex;
    align-items: center;
    padding    : 30px 0;

    .li {
        flex           : 1;
        justify-content: center;
        align-items    : center;
        display        : flex;
        border-left    : 1px solid $--border-color-extra-light;
        padding-left:30px;

        &:first-child {
            border-width: 0px;
        }

        .icon {
            flex            : none;
            border-radius   : 100%;
            height          : 60px;
            width           : 60px;
            background-color: $--background-color-base;
            display         : flex;
            align-items     : center;
            justify-content : center;
            color           : $--color-text-secondary;
            font-size       : 24px;
        }

        .text {
            flex        : auto;
            padding-left: 20px;
        }

        .sum {
            font-size: 20px;
            color:$--color-text-primary;
            font-size: 30px;
            font-weight: bold;
        }

        .info {
            font-size: 12px;
            color    : $--color-text-secondary;
        }
    }
}

.hotGoods {

    box-sizing   : border-box;

    .ul {

        display  : flex;
        flex-wrap: wrap;
        height   : 100px;
        padding:0px 10px;
        overflow : hidden;

        .li {
            box-sizing: border-box;
            padding   : 20px 10px;

            .border {
                border-radius: 100%;

                .showImg {
                    cursor    : pointer;
                    border    : 2px solid $--border-color-lighter;
                    transition: all .5s;
                    padding   : 2px;

                    border-radius: 100%;
                    opacity     : 0.5;

                    .img {
                        width        : 50px;
                        height       : 50px;
                        border-radius: 100%;
                        overflow     : hidden;

                    }

                    &:hover {
                        border-color: $--color-primary;
                        opacity     : 1;
                    }
                }


            }

        }
    }
}

.contentWrap {


    .ul {
        display   : flex;
        flex-wrap : wrap;
        border-top: 1px solid $--border-color-extra-light;
        &:first-child {
            border-width: 0px;
        }
        .li {
            flex       : 1;
            padding    : 30px;
            text-align : center;
            border-left: 1px solid $--border-color-extra-light;

            &:first-child {
                border-width: 0px;
            }
        }
        .t1{
            font-size: 12px;
            color:$--color-text-secondary;
        }
        .t2{
            font-size: 30px;
            padding:10px 0px;
            font-weight: bold;
        }
        .t3{
            font-size: 12px;
            color:$--color-text-secondary;
        }
    }

    .rise {
        color: $--color-danger;
    }

    .reduce {
        color: $--color-success;
    }
}